<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>


<!-- stop-阻止冒泡-只能是自己
capture-优先触发自己-阻止捕获
self-不触发子元素
 -->
<title></title>

<div id="app">
	<!-- //做嵌套 -->
	<!-- //<div>say hi！ -->
	
		<!-- <div>say hello</div><!-- //hi是父 hello是子 --> 
		<!-- <div @click="say('yoxi')">say nihao -->
		<!-- <div @click="say('baga')">say hello</div> -->
		
		
		<!-- capture 剔除优先捕获事件 先hi再hello 一个一个来的  -->
		<!-- <div @click.capture="say('yoxi')">say nihao -->
		<!-- <div @click="say('baga')">say hello</div> -->
		
		
		<!-- 先修饰stop 再 -->
		<!-- <div @click.capture.stop="say('yoxi')">说 你好 -->
		<!-- <div @click="say('baga')">说 混蛋</div> -->
		
		<!-- 没有聚焦？ -->
		<!-- <div v-on:keydown.enter="say('yoxi')">say nihao -->
		<!-- <div @click="say('baga')">say hello</div> -->
		
		
		<!-- <div @click.self="say('yoxi')">say nihao
		</br>
		<input @keydown.enter="say('enter')">
		<div @click="say('baga')">say hello</div> -->
		
		<div @click.self="say('hi')">say nihao
		</br>
		<input v-model="content" @keydown.enter="say1()">
		<div @click="say('hello')">say hello</div> 
		
		
	</div>
</div>
</head>
<body>
	
	<script>
		new Vue({
			el:"#app",
			//输入框输啥就是显示啥 加data
			data:{
				content:""
				
			},
			methods:{
				say:function(message){
					//弹窗方法
					alert(message);
				},
				say1:function(){
					alert(this.content)
				}
			}
			
		})

	</script>
	
</body>
</html>
